<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<title>账单一览</title>
	<script type="application/javascript" src="/static/js/common.js"></script>
</head>
<body>
	<nav class="nav">
		<a class="button button-link left" onclick="history.back();">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-fanhui-"></use>
			</svg>返回
		</a>
		<a class="button button-link right" onclick="history.go(0);">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-zhuanfa-"></use>
			</svg>刷新
		</a>
		<h1 class="title">账单查询</h1>
	</nav>
	<div class="app-content no-title">
		<div class="weui-msg">
			<div class="weui-form-preview">
				<div class="weui-form-preview__hd">
					<input type="hidden" id="billUuid" th:value="${bills.getUuid()}">
					<label class="weui-form-preview__label">总计金额</label>
					<em class="weui-form-preview__value">￥[[${bills.getTotal()}]]</em>
				</div>
				<div class="weui-form-preview__bd" th:each="bill:${bills.getBills()}">
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label" th:text="${bill.getAccountName()}"></label>
						<span class="weui-form-preview__value">
							<span th:if="${bill.getMoney() > 0}">-</span>
                            <span th:if="${bill.getMoney() < 0}">+</span>
							￥
							<span th:text="${bill.getAbsMoney()}"></span>
						</span>
					</div>
				</div>
			</div>
			<div class="weui-footer">
				<p class="weui-footer__text">统计截止日期：
					[[${#dates.format(bills.getDate(), 'yyyy-MM-dd')}]]
				</p>
			</div>
			<div class="weui-footer">
				<p class="weui-footer__text">统计生成日期：
					[[${#dates.format(bills.getCreatDate(), 'yyyy-MM-dd HH:mm:ss')}]]
				</p>
			</div>
			<div class="weui-msg__opr-area">
				<p class="weui-btn-area">
					<a th:href="@{/book/list-book-by-bill/{uuid}(uuid=${bills.getUuid()})}" class="weui-btn weui-btn_plain-default">查看详情</a>
					<a th:href="@{/book/list-book-by-bill-join/{uuid}(uuid=${bills.getUuid()})}" class="weui-btn weui-btn_plain-primary">与我相关</a>
				</p>
				<p class="weui-btn-area" th:if="${bills.getTotal() > 0}">
					<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default" th:if="${bills.getClose()}">本期账单已结算</a>
					<a href="javascript:;" class="weui-btn weui-btn_primary" id="settle" th:if="${!bills.getClose()}">确认结算</a>
				</p>
			</div>
		</div>
	</div>
<script type="application/javascript">
	APP.submitAction($("#settle"), function (item) {
		$.confirm({
			title: '账单结算',
			text: '请确认是否结算?',
			onOK: function () {
				//点击确认
				var billUuid = $("#billUuid").val();
				if(!billUuid) {
					$.toast("结算失败,账单uuid为空", "forbidden", function () {
						APP.disabled((item));
					});
				}

				APP.ajaxSubmit("/api/bill/kill-book", {billUuid: billUuid}, function (res) {
					APP.ajaxRes(res, function () {
						APP.disabled(item, true);
						$.toast("结算完成!");
					})
				});
			},
			onCancel: function () {
				APP.disabled(item)
			}
		});
	})

</script>
</body>
</html>
